<template>
	<view class="content">
		<!-- 线上购票 -->
		<view class="topImg">
			<image
				src="https://tenfei04.cfp.cn/creative/vcg/veer/612/veer-316610198.jpg?x-oss-process=image/format,webp"
				mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="dateOption">
				<view class="title">
					请选择日期
				</view>
				<view class="dateList">
					<view class="option">
						<text class="date">今天 06-29</text>
						<text>\n星期三</text>
					</view>
					<view class="option">
						<text class="date">今天 06-30</text>
						<text>\n星期四</text>
					</view>
					<view class="option">
						<text class="date">今天 07-01</text>
						<text>\n星期五</text>
					</view>
					<view class="more">
						<text>
							更多
							日期
						</text>
					</view>
				</view>
			</view>
			<view class="numOptin">
				<view class="title">
					请选择购票数量
				</view>
				<view class="ticket">
					<view>
						<text class="title">成人票\n</text>
						<text class="tag">电子票</text>
					</view>
					<view class="top">
						<view class="price">
							￥{{adult.prices}}.00
						</view>
						<view class="">
							<text class="numChange" @click="changeAdult(0)">-</text>
							<text class="num">{{adult.num}}</text>
							<text class="numChange" @click="changeAdult(1)">+</text>
						</view>
					</view>
				</view>
				<view class="ticket">
					<view>
						<text class="title">儿童票\n</text>
						<text class="tag">电子票</text>
					</view>
					<view class="top">
						<view class="price">
							￥{{child.prices}}.00
						</view>
						<view class="">
							<text class="numChange" @click="changeChild(0)">-</text>
							<text class="num">{{child.num}}</text>
							<text class="numChange" @click="changeChild(1)">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="payBox">
			<view class="p_left">
				<text>合计</text>
				<text class="totalPrices">￥{{ child.num * child.prices + adult.num * adult.prices }}.00</text>
				<text>明细</text>
			</view>
			<view class="btn" @click="submit">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adult: {
					num: 0, //成人票数量
					prices: 20 //成人票价格
				},
				child: {
					num: 0, //儿童票数量
					prices: 10 //儿童票价格
				},
			};
		},
		methods: {
			changeAdult(n) { //修改成人票数
				if (n) {
					if (this.adult.num < 10) {
						this.adult.num++
					} else {
						uni.showToast({
							title: '单次最多10张',
							icon: "none",
							duration: 1000
						});
					}
				} else {
					if (this.adult.num) {
						this.adult.num--
					} else {
						uni.showToast({
							title: '已经没有了',
							icon: "none",
							duration: 1000
						});
					}
				}
			},
			changeChild(n) {
				if (n) {
					if (this.child.num < 10) {
						this.child.num++
					} else {
						uni.showToast({
							title: '单次最多10张',
							icon: "none",
							duration: 1000
						});
					}
				} else {
					if (this.child.num) {
						this.child.num--
					} else {
						uni.showToast({
							title: '已经没有了',
							icon: "none",
							duration: 1000
						});
					}
				}
			},
			async addOrder(num) { //添加订单
				let data = num == 0 ? {
					date: '2022-06-30', //票的时间
					type: 0, //类型0为成人 1为儿童
					num: this.adult.num, //数量
					price: this.adult.prices, //价格
					name: '中国千年银杏谷', //票的名称
					id: 1, //用户id的id
				} : {
					date: '2022-06-30', //票的时间
					type: 1, //类型0为成人 1为儿童
					num: this.child.num, //数量
					price: this.child.prices, //价格
					name: '中国千年银杏谷', //票的名称
					id: 1, //用户id的id
				};
				
				let res = await this.$http({
					url: '/addTicketOrder',
					method: 'post',
					data
				})
			},
			submit(){
				console.log('点击了支付');
				if(this.adult.num || this.child.num){
					if(this.adult.num > 0){
						this.addOrder(0)
					}
					if(this.child.num > 0){
						this.addOrder(1)
					}
					uni.showToast({
						title: '付款成功',
						duration: 1000
					});
				}else{
					uni.showToast({
						title: '未选择无需支付',
						duration: 1000,
						icon:'error'
					});
				}
			}
		}
	}
</script>

<style lang="less">
	@radius: 16rpx; //圆角
	@h1: 36rpx; //大标题
	@h2: 32rpx; //二级标题
	@h3: 28rpx; //三级标题
	@text: 24rpx; //四级标题、标签、说明文字
	//颜色
	@color1: #C78748;
	@color2: #FFBF81;
	@color3: #673A19;
	@color4: #42BAE7;
	@color5: #5D9319;
	@color6: #E0593B;
	@color7: #FFF9EF;
	//间距
	@interval1: 72rpx;
	@interval2: 48rpx;
	@interval3: 32rpx;
	@interval4: 16rpx;
	@shadow: 0 0 8rpx 8rpx #DDDDDD33;

	.content {
		font-size: @h3;
		background-color: @color7;
		height: 100vh;
		justify-content: start;
		align-items: flex-start;
		padding-bottom: 100rpx;
	}

	.topImg {
		height: 300rpx;
		width: 750rpx;
		overflow: hidden;
		position: relative;

		image {
			width: 750rpx;
		}

		&::before {
			content: '';
			display: block;
			width: 750rpx;
			height: @radius;
			background-color: @color7;
			border-radius: @radius @radius 0 0;
			position: absolute;
			bottom: 0;
		}
	}

	.main {
		padding: @interval3;
	}

	.title,
	.price,
	.totalPrices {
		font-size: @h2;
	}

	.title {
		margin-bottom: @interval3;
	}

	.dateOption {
		.dateList {
			width: 686rpx;
			text-align: center;
			display: flex;
			margin-bottom: @interval2;
		}

		.date {
			font-size: @text;
		}

		.option {
			line-height: 2;
			flex: 2;
			margin-right: @interval4;
			padding: @interval4 0;
		}

		.more {
			font-size: @text;
			padding-top: 40rpx;
			box-sizing: border-box;
			flex: 1;
		}

		.option,
		.more {
			background-color: #FFFFFF;
			border-radius: @radius;
			box-shadow: @shadow;
		}
	}

	.numOptin {
		.ticket {
			background-color: #FFF;
			box-shadow: @shadow;
			padding: @interval3;
			border-radius: @radius;
			margin-bottom: @interval3;
		}

		.numChange {
			display: inline-block;
			background-color: @color1;
			text-align: center;
			color: #FFF;
			width: 1.2em;
			height: 1.2em;
			line-height: 1.2em;
			border-radius: 1em;
		}

		.num {
			display: inline-block;
			width: 3em;
			text-align: center;
			line-height: 1.2em;
		}

		.top {
			display: flex;
			justify-content: space-between;
		}

		.tag {
			display: inline-block;
			font-size: @text;
			color: #666;
			padding: @interval3 0;
		}
	}

	.payBox {
		position: fixed;
		bottom: 0;
		background-color: #FFF;
		display: flex;
		padding: @interval3;
		justify-content: space-between;
		width: 750rpx;
		height: 120rpx;
		box-sizing: border-box;
		box-shadow: @shadow;
		line-height: 60rpx;

		.totalPrices {
			margin: 0 @interval1 0 @interval4;
		}

		.p_left {
			font-size: @text;
		}

		.btn {
			height: 60rpx;
			box-sizing: border-box;
			background-color: @color1;
			padding: 0 @interval3;
			color: #FFF;
			border-radius: 30rpx;
			line-height: 60rpx;
		}
	}
</style>
